<template>
    <div style="width: 100%">
        <el-form :disabled="dialogType==='view'" ref="form" size="small" style="height: 250px" :rules="rules"
                 :model="formData" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="中文名称" prop="nameCn">
                        <el-input v-model="formData.nameCn"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="编码标识" prop="name">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="英文名称" prop="nameEn">
                        <el-input v-model="formData.nameEn"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-col :span="24">
                <el-form-item label="英文描述">
                    <el-input v-model="formData.describeEn"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="24">
                <el-form-item label="中文描述">
                    <el-input v-model="formData.describeCn"></el-input>
                </el-form-item>
            </el-col>
        </el-form>


        <avue-crud :option="{...option,selection:dialogType!=='view'}"
                   :table-loading="loading"
                   :data="formData.dimensionList"
                   @selection-change="v=>selection=v"
                   ref="crud">
            <template slot="menuLeft">
                <el-button size="small" type="primary" :disabled="dialogType==='view'" @click="addLine">添加行
                </el-button>
                <el-button size="small" type="danger" :disabled="dialogType==='view'||selection.length===0"
                           @click="remove">
                    移除
                </el-button>
            </template>

            <template slot="meteringFlag" slot-scope="{row}">
                <el-radio :disabled="dialogType==='view'"
                          :value="row.meteringFlag"
                          :label="1"
                          @change="changeRadio(row,'meteringFlag')">
                    &nbsp;
                </el-radio>
            </template>

            <template slot="defaultFlag" slot-scope="{row}">
                <el-radio :disabled="dialogType==='view'"
                          :value="row.defaultFlag"
                          :label="1"
                          @change="changeRadio(row,'defaultFlag')">
                    &nbsp;
                </el-radio>
            </template>
        </avue-crud>

        <div class="md-component-btns">
            <el-button size="medium" type="primary" v-if="dialogType==='view'"
                       @click="()=>{$emit('viewToEdit'),viewToEdit()}">编辑
            </el-button>
            <el-button size="medium" type="primary" v-if="dialogType!=='view'" @click="save">保存</el-button>
            <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
        </div>
    </div>
</template>
<script>
import MsEditTable from "@/components/ms-edit-table.vue";

import * as api from "@/api/modulManage/unit"

export default {
    name: "unitsManageTemp",
    components: {MsEditTable},
    data() {
        return {
            tableList: [],

            loading: false,
            option: {
                height: 'auto',
                calcHeight: 30,
                dialogWidth: 900,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                labelWidth: 120,
                menuWidth: 90,
                viewBtn: false,
                dialogClickModal: false,
                tabs: true,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                refreshBtn: false,
                columnBtn: false,
                align: "center",
                menu: false,
                column: [
                    {
                        label: "英文名称",
                        prop: "nameEn",
                        cell: true,
                    },
                    {
                        label: "中文名称",
                        prop: "name",
                        cell: true,
                    },
                    {
                        label: "基准单位",
                        prop: "meteringFlag",
                        slot: true
                    },
                    {
                        label: "默认单位",
                        prop: "defaultFlag",
                        slot: true
                    },
                    {
                        label: "换算率",
                        prop: "convertFactor",
                        cell: true,
                    },
                ],
            },
            selection: [],

            formData: {
                name: "",
                nameEn: "",
                describeCn: "",
                describeEn: "",
                dimensionList: []
            },
            rules: {
                name: [{
                    required: true,
                    trigger: 'blur',
                    message: "请输入编码标识"
                }, {pattern: '^[A-Za-z][A-Za-z0-9_]{1,29}$', message: '请输入正确编码标识'}],
                nameCn: [{required: true, trigger: 'blur', message: "请输入中文名称"}],
                nameEn: [{required: true, trigger: 'blur', message: "请输入英文名称"}],
            },

            dialogType: "add"
        }
    },
    computed: {
        title() {
            if (this.dialogType === "add") {
                return "新增";
            }
            if (this.dialogType === "edit") {
                return "编辑";
            }
            if (this.dialogType === "view") {
                return "查看";
            }
        }
    },
    methods: {
        changeRadio(row, prop) {
            let data = this.deepCopy(this.formData.dimensionList);
            this.formData.dimensionList = [];
            data.forEach(i => {
                if (i.$index === row.$index) {
                    i[prop] = 1;
                } else {
                    i[prop] = 0;
                }
            })
            this.formData.dimensionList = data;
        },
        addLine() {
            this.formData.dimensionList.push({
                nameEn: "",
                name: "",
                meteringFlag: "",
                defaultFlag: "",
                convertFactor: "",
                $cellEdit: true
            })
        },
        remove() {
            let data = this.deepCopy(this.formData.dimensionList);
            let index = this.selection.map(i => i.$index);

            this.formData.dimensionList = [];
            data.forEach(i => {
                if (!index.includes(i.$index)) {
                    this.formData.dimensionList.push(i)
                }
            })
        },

        resetDialog() {
            this.formData = {
                name: "",
                nameEn: "",
                describeCn: "",
                describeEn: "",
                dimensionList: []
            }
        },

        viewToEdit() {
            this.dialogType = 'edit'

            let data = this.deepCopy(this.formData.dimensionList);
            this.formData.dimensionList = [];
            data.forEach(item => {
                item.$cellEdit = true;
            })
            this.formData.dimensionList = data;
        },

        save() {
            let method = this.dialogType === "add" ? "addUnit" : "updateUnit";
            this.$refs["form"].validate(f => {
                if (f) {
                    if (this.formData.dimensionList.length === 0) {
                        this.$message.warning("列表不能为空");
                        return;
                    }

                    let data = this.deepCopy(this.formData.dimensionList);
                    //当下方列表不为空时，默认单位 基准单位 必须有值
                    if (data.length > 0) {
                        let flag = 0;
                        for (let i = 0; i < data.length; i++) {
                            let item = data[i];
                            if (item.meteringFlag) {
                                flag++;
                            }
                            if (item.defaultFlag) {
                                flag++;
                            }
                        }
                        if (flag !== 2) {
                            this.$message.warning("请选择默认基准/默认单位");
                            return;
                        }
                    }
                    api[method](this.formData).then(() => {
                        this.$message.success("保存成功");
                        this.$emit('refresh');
                        this.$emit('removeThisTabs');
                    })
                }
            })
        },
        view(row) {
            this.dialogType = "view";
            api.getDetails({oid: row.oid}).then(res => {
                this.formData = res.data.data;
            })
        },
        edit(row) {
            this.dialogType = "edit";
            api.getDetails({oid: row.oid}).then(res => {
                let data = res.data.data;
                data.dimensionList.forEach(item => {
                    item.$cellEdit = true;
                })
                this.formData = data;
            })
        },
        open() {
            this.resetDialog();
            this.dialogType = "add";
        },
        close() {
        }
    }
}
</script>
<style scoped>

</style>
